<template>
  <!--外业钻探数据-->
  <div class="wrap">
    <!--预览pdf-->
    <div v-if="pdfUrl" class="preview-pdf" :class="enterpriseType === '1'? 'preview-pdf-jian-guan' : ''" @click="hidePdfUrl">
      <iframe :src="pdfUrl" frameborder="0" width="90%" />
    </div>
    <div v-else class="app-container-detail">
      <el-row :gutter="10" class="button-wrap" :style="{width:mainContentWidth + 'px','left':'80px'}">
        <el-col :span="1.5">
          <el-button icon="el-icon-arrow-left" size="mini" @click="handleReturn()">返回</el-button>
        </el-col>
        <el-col v-hasPermi="['supervise:explorationOutside:update']" :span="1.5">
          <el-button v-clickForbidden icon="el-icon-edit-outline" size="mini" @click="adjustLayering">调整分层</el-button>
        </el-col>
        <el-col v-hasPermi="['supervise:explorationOutside:update']" :span="1.5">
          <el-button v-clickForbidden icon="el-icon-document-checked" :disabled="drillingList.length === 0" size="mini" @click="handleSave">保存分层</el-button>
        </el-col>
      </el-row>
      <div class="exploration-cont">
        <el-row ref="mainContent">
          <el-col :span="4">
            <el-form>
              <div class="exploration-type">
                <el-form-item label>
                  <el-select
                    v-model="drillVal"
                    style="width:100%"
                    size="medium"
                    clearable
                    placeholder="请选择勘探点类型"
                    @change="changeTypeList"
                  >
                    <el-option
                      v-for="item in explorationType"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    />
                  </el-select>
                </el-form-item>
                <el-scrollbar wrap-class="scrollbar-wrapper" class="scrollbar-wrapper" :style="{height:mainContentheight -55+ 'px'}">
                  <div class="exploration">
                    <el-row v-if="explorationList.length > 0">
                      <el-col
                        v-for="(item,index) in explorationList"
                        :key="index"
                        :class="[{'active': currentIndex === index}]"
                        class="spot"
                        @click.native="getCurrentSpot(index,item.id)"
                      >
                        <span>{{ item.explorationCode }}</span>
                        <span class="explorationStatus" :class="`explorationStatus${item.status}`" v-text="explorationStatus(item.status)" />
                        <el-tooltip v-if="EnterpriseType === '1' && (item.isDataTime === '1' || item.isDataLocation === '1' || item.isDataSpeed === '1' || item.isImgTime === '1' || item.isImgLocation === '1')" effect="light" content="异常" placement="right">
                          <i class="el-icon-warning icon-warning" />
                        </el-tooltip>
                      </el-col>
                    </el-row>
                    <div v-else class="no-data">
                      <p><svg-icon icon-class="no-data" class="no-data-icon" /></p>
                      <p>暂无数据</p>
                    </div>
                  </div>
                </el-scrollbar>
              </div>
            </el-form>
          </el-col>
          <el-col :span="20">
            <DrillingExploration
              ref="DrillingExploration"
              :table-data="drillingList"
              :form-data="formData"
              :city-options="cityOptions"
              :edit-layering="editLayering"
              :equipment-type="equipmentType"
              :user-types="userTypes"
              :pdf-url.sync="pdfUrl"
              @tableDataChange="tableDataChange"
            />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getEnterpriseType } from '@/utils/auth'
// 页面接口
import { listByTreeProcessType } from '@/api/common/area.js'
import { listGeoph, getGoephyDetail, ExplorationDistributionByIdPC, updateExplorationOutside } from '@/api/projectManage/projectData/dataAcquisition'
import { mapState } from 'vuex'
import DrillingExploration from './components/DrillingExploration'
export default {
  name: 'Index',
  components: {
    DrillingExploration
  },
  data() {
    return {
      EnterpriseType: getEnterpriseType(), // 单位类型
      mainContentWidth: '',
      mainContentheight: '',
      currentIndex: 0, // 当前选择
      currentExplorationId: '', // 当前选择勘探点
      drillVal: '', // 勘探点
      drillingList: [], // 勘探点数据
      formData: {},
      explorationList: [],
      cityOptions: [],
      editLayering: false, // 调整分层
      equipmentType: [], // 已分配的设备
      userTypes: [], // 已分配的人员
      changeLayerNumData: [], // 修改层号的数据
      // iframe 的宽度和高度
      conheight: {
        width: '',
        height: ''
      },
      pdfUrl: '', // 预览pdf地址
      explorationCode: '' // 当前选中勘探点
    }
  },
  computed: {
    ...mapState({
      explorationType: (state) => state.basicInfo.explorationType,
      proId: (state) => state.basicInfo.proId,
      enterpriseType: state => state.user.enterpriseType
    })
  },
  watch: {
    drillVal(newVal) {
      this.currentIndex = 0
      if (newVal === '' || newVal === null) {
        this.drillingList = []
        return
      }
    }
  },
  mounted() {
    /** 获取主题内容宽度 start*/
    setTimeout(() => {
      this.mainContentWidth = this.$refs.mainContent.$el.offsetWidth
      this.mainContentheight = this.$refs.DrillingExploration.$el.offsetHeight
    }, 100)
    const that = this
    window.onresize = () => {
      return (() => {
        that.mainContentWidth = that.$refs.mainContent.$el.offsetWidth
      })()
    }
    /** 获取主题内容宽度 end*/

    this.explorationCode = this.$route.query.explorationCode
    this.drillVal = this.explorationType.length > 0 ? this.explorationType[0].dictValue : ''
    this.getList({ enterpriseType: this.enterpriseType, proId: this.proId, drillHole: '0' })
    this.getRegionTree()
  },
  methods: {
    explorationStatus(status) {
      const statusText = new Map([
        ['0', '未开始'],
        ['1', '进行中'],
        ['2', '已完成'],
        ['3', '已提交'],
        ['4', '已签字'],
        ['5', '已审核'],
        ['default', '']
      ])
      return statusText.get(status) || statusText.get('default')
    },
    // 隐藏pdf
    hidePdfUrl() {
      this.pdfUrl = ''
    },
    // 获取分层数据
    tableDataChange(data) {
      this.changeLayerNumData = data
    },
    // 保存分层
    handleSave() {
      updateExplorationOutside(this.changeLayerNumData).then(res => {
        if (res) {
          this.msgSuccess('修改成功')
          this.editLayering = false
          this.getCurrentSpot(this.currentIndex, this.currentExplorationId)
        }
      })
    },
    // 调整分层
    adjustLayering() {
      this.editLayering = true
    },

    // 切换勘探点
    changeTypeList(value) {
      // if (!value) return
      this.explorationCode = ''
      this.getList({ enterpriseType: this.enterpriseType, proId: this.proId, explorationType: value, drillHole: '0' })
      this.editLayering = false
    },
    // 获取数据
    getList(value) {
      listGeoph(value).then(res => {
        const { data: { rows }} = res
        // this.explorationList = rows.map(item => ({ explorationCode: item.explorationCode, id: item.id, status: item.status }))
        this.explorationList = rows
        if (!this.explorationList.length) return
        // console.log(this.explorationCode)
        if (this.explorationCode) {
          this.currentIndex = this.explorationList.findIndex(item => item.explorationCode === this.explorationCode)
          const id = this.explorationList.filter(item => item.explorationCode === this.explorationCode)[0].id
          this.getCurrentSpot(this.currentIndex, id)
        } else {
          this.getCurrentSpot(0, this.explorationList[0].id)
        }
      })
    },
    // 获取区域树
    async getRegionTree() {
      const { data: { rows }} = await listByTreeProcessType({ regionCode: '' })
      this.cityOptions = this.deleteChildren(rows)
    },
    // 获取当前点的信息
    getCurrentSpot(index, id) {
      this.editLayering = false
      this.currentIndex = index
      this.currentExplorationId = id
      getGoephyDetail({ explorationId: id }).then(res => {
        this.drillingList = res.data
      })
      ExplorationDistributionByIdPC({ explorationId: id }).then(res => {
        if (res) {
          this.formData = { ...res.data.exploration }
          this.equipmentType = res.data.equipmentType
          this.userTypes = res.data.userTypes
        }
      })
    },
    // 返回
    handleReturn() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
  .preview-pdf{
    height: calc(100vh - 131px);
    overflow-y: hidden;
    background: rgb(0,0,0,0.5);
    position: relative;
    &.preview-pdf-jian-guan{
      height: calc(100vh - 80px);
    }
    iframe{
      position: absolute;
      left:5%;
      top:0;
      height: 100%!important;
    }
  }
</style>

